<template>
  <div id="teamlist">
    <!-- <drawer :show.sync="drawerVisibility" :show-mode="showModeValue" :placement="showPlacementValue" :drawer-style="{'background-color':'#35495e', width: '200px'}" style="height:100vh"> -->

    <div id="x-header">

      <x-header slot="header" :left-options="{backText: ''}" style="width:100%;position:absolute;left:0;top:0;z-index:100;" :title="'团队报名'" :transition="headerTransition" @on-click-more="onClickMore">
        <a href="./#/racelist" style="font-size:24px" slot="right">
          <i class="fa fa-home fa-fw"></i>
        </a>

      </x-header>

    </div>

    <view-box ref="viewBox" style="height:100vh;" body-padding-top="50px" body-padding-bottom="0px">
      <!-- <myflow :stepindex=3></myflow> -->
      <div style="padding:15px;padding-top:0">
        <x-button type="primary" @click.native="goCreatTeam()">创建一个新团队</x-button>
      </div>

      <search style="position:relative" placeholder="输入队名检索" @on-submit="searchList" v-model="searchName" position="relative" :auto-fixed="false" auto-scroll-to-top top="46px" ref="search"></search>

      <div>

        <ul>
          <li style="display: none">
            <panel :list="list" :type="type"></panel>
          </li>

          <scroller style="top:0px;" lock-x scrollbar-y height="-200" ref="scroller" use-pullup v-model="demo4Value" @on-pullup-loading="load4">
            <div class="box2">
              <div class="content">
                <group>
                  <cell-box @click.native='setTeam(item.stat.count,max,item.passwd,item.id)' v-if='list.length!=0' v-for="(item,index) in list" :key="index">
                    <div class="weui-media-box weui-media-box_text">
                      <div class="weui-media-box_appmsg">
                        <i class="weui-icon weui_icon_circle weui-icon-circle"></i>
                        <div class="weui-media-box__hd"> <img :src="item.icon" alt="" class="weui-media-box__thumb"></div>
                        <div class="weui-media-box__bd">
                          <h4 class="weui-media-box__title">{{item.name}}</h4>
                          <p class="weui-media-box__desc">{{item.content+1}}</p>
                          <p v-if='!!item.passwd' class="weui-media-box__desc">(需要口令)
                            <span v-if="item.stat.count+1<max&&max!=null">{{item.stat.count+1}}/{{max}}</span>
                            <span v-if="item.stat.count+1>=max&&max!=null"> 已满 </span>
                            <span v-if='max==null'>报名人数无限制</span>
                          </p>
                          <p v-if='!item.passwd' class="weui-media-box__desc">(自由组队)
                            <span v-if="item.stat.count+1<max&&max!=null">{{item.stat.count+1}}/{{max}}</span>
                            <span v-if="item.stat.count+1>=max&&max!=null"> 已满 </span>
                            <span v-if='max==null'>报名人数无限制</span>
                          </p>

                        </div>
                      </div>

                    </div>

                  </cell-box>

                </group>

                <!-- <ul>
                    <li @click='setTeam(item.stat.count,max,item.passwd,item.id)' v-if='list.length!=0' v-for="(item,index) in list">
                      <div>
                        <div class="weui-media-box weui-media-box_text">
                          <div class="weui-media-box_appmsg">
                            <div class="weui-media-box__hd"><img :src="item.icon" alt="" class="weui-media-box__thumb"></div>
                            <div class="weui-media-box__bd">
                              <h4 class="weui-media-box__title">{{item.name}}</h4>
                              <p class="weui-media-box__desc">{{item.content}}</p>
                              <p v-if='!!item.passwd' class="weui-media-box__desc">(需要口令)
                                <span v-if="item.stat.count<max&&max!=null">{{item.stat.count}}/{{max}}</span>
                                <span v-if="item.stat.count>=max&&max!=null"> 已满 </span>
                                <span v-if='max==null'>报名人数无限制</span>
                              </p>
                              <p v-if='!item.passwd' class="weui-media-box__desc">(自由组队)
                                <span v-if="item.stat.count<max&&max!=null">{{item.stat.count}}/{{max}}</span>
                                <span v-if="item.stat.count>=max&&max!=null"> 已满 </span>
                                <span v-if='max==null'>报名人数无限制</span>
                              </p>

                            </div>
                          </div>

                        </div>
                      </div>
                    </li>

                    <li style="text-align:center;height:30px;line-height:30px;" v-if='list.length==0'>
                      没有可以加入的团队
                    </li>
                  </ul> -->
              </div>
            </div>
            <div v-if='!stop' slot="pullup" class="xs-plugin-pullup-container xs-plugin-pullup-up" style="position: absolute; width: 100%; height: 50px; bottom: -50px; text-align: center;">
              <span v-show="demo4Value.pullupStatus === 'default'"></span>
              <span class="pullup-arrow" v-show="demo4Value.pullupStatus === 'default' || demo4Value.pullupStatus === 'up' || demo4Value.pullupStatus === 'down'" :class="{'rotate': demo4Value.pullupStatus === 'down'}">↑</span>
              <span v-show="demo4Value.pullupStatus === 'loading'">
                <spinner type="ios-small"></spinner>
              </span>
            </div>
            <div v-if='stop' class="nomore"></div>
          </scroller>
        </ul>

        <!-- <circle-menu type="top" :number='3' mask='black' btn circle>
            <a slot="item_1" class="fa fa-twitter fa-lg"></a>
            <a slot="item_2" class="fa fa-weixin fa-lg"></a>
            <a slot="item_3" class="fa fa-weibo fa-lg"></a>
          </circle-menu> -->

      </div>

    </view-box>
    <div v-if='pageType=="baoming"' id='x-bottom'>
      <x-header slot="header" style="width:100%;position:absolute;left:0;bottom:0;z-index:100;" title="">
        <span slot="overwrite-left">
        </span>
        <div @click='next' style="font-size:18px" slot="right">
          <a>下一步</a>
        </div>
      </x-header>
    </div>

    <div v-if='pageType!="baoming"' id='x-bottom'>
      <x-header slot="header" style="width:100%;position:absolute;left:0;bottom:0;z-index:100;" title="">
        <span slot="overwrite-left">
        </span>

        <div @click='next' style="font-size:18px" slot="right">
          <a>下一步</a>
        </div>

      </x-header>
    </div>

    <div @click="modal" class="modal"></div>

    <!-- <x-dialog v-model="show" hide-on-blur class="dialog-demo">
      <group title="团队报名">
        <x-input id='postcode' v-model="ps" placeholder='输入口令' class="weui-vcode">
          <x-button @click.native='checkPs()' slot="right" type="primary" mini>提交</x-button>
        </x-input>

      </group>
      <div @click="show=false">
        <span class="vux-close"></span>
      </div>
    </x-dialog> -->

    <!-- <div v-transfer-dom>
      <group  v-model="show" title="团队报名">
        <x-input id='postcode' v-model="ps" placeholder='输入口令' class="weui-vcode">
          <x-button @click.native='checkPs()' slot="right" type="primary" mini>提交</x-button>
        </x-input>

      </group>
      <div @click="show=false">
        <span class="vux-close"></span>
      </div> -->
    <confirm v-model="show" :close-on-confirm="false" title="团队报名" @on-confirm="checkPs">
      <x-input v-model="ps" id='postcode' placeholder="输入口令" class="weui-vcode">
        <!-- <x-button  @click.native='checkPs()' slot="right" type="primary" mini>提交</x-button> -->
      </x-input>

    </confirm>

  </div>

</template>

<script type="text/ecmascript-6">
/* eslint-disable*/

import { indexedDB } from "@/api/indexedDB.js";
import { axios } from "@/api/axios.js";
import qs from "qs";
import Myheader from "@/common/components/myheader.vue";
import Myflow from "@/common/components/myflow.vue";
import mixin from "@/common/js/mixin";
import { setTitle } from "@/common/js/main.js";

import {
  Confirm,
  Checker,
  CheckerItem,
  Cell,
  CellBox,
  Flexbox,
  FlexboxItem,
  Panel,
  Search,
  Rater,
  Group,
  XHeader,
  ViewBox,
  Scroller,
  Spinner,
  TransferDom,
  Drawer,
  XButton,
  XDialog,
  XInput
} from "vux";

//  import Myheader from "@/common/components/myheader.vue";
import CircleMenu from "vue-circle-menu";
import { setTimeout } from "timers";

export default {
  mixins: [mixin],
  props: ["page"],
  data() {
    return {
      pageConfig: window.pageConfig,
      id: "",
      ps: "",
      show: false,
      max: this.$route.query.max,
      pageIndex: 1,
      eventId: 0,
      config: {
        perpage: 10, //分页数量
        page: 1, //当前页数
        hasmorepage: false //是否还有分页
      },
      drawerVisibility: false,
      showModeValue: "overlay",
      showPlacementValue: "right",
      stop: false,
      demo4Value: {
        pullupStatus: "default"
      },
      data3: 1,
      searchName: "",
      type: "5",
      list: [],
      clock: true
    };
  },
  computed: {
    headerTransition() {
      if (!this.direction) return "";
      return this.direction === "forward"
        ? "vux-header-fade-in-right"
        : "vux-header-fade-in-left";
    }
  },
  beforeCreate() {
    setTitle("团队报名");
  },
  created() {
    let _this = this;
    //console.log(this.$route.query.max)
    this.eventId = window.localStorage.getItem("eventId");
    _this.getList();
  },
  methods: {
    onClickMore() {},
    checkPs() {
      let _this = this;
      this.axios
        .post(
          `${window.host}team/passwd`,
          qs.stringify({
            passwd: this.ps,
            id: this.id
          })
        )
        .then(
          response => {
            if (response.data.code == "200") {
              window.localStorage.setItem("teamId", _this.id);
              window.localStorage.setItem("passwd", _this.ps);
              this.show = false;
              this.clock = false;
              _this.$router.push("/certificate/identity");
              // indexedDB("teamId", "set", _this.RACEID, _this.id, function() {
              //   indexedDB("passwd", "set", _this.RACEID, _this.ps, function() {
              //     _this.$router.push("/disclaimer");
              //   });
              // });
            } else {
              this.$vux.toast.show({
                text: response.data.msg,
                type: "warn"
              });
            }
          },
          error => {
            console.log(error);
          }
        );
    },
    setTeam(count, max, passwd, teamid) {
      //设置团队报名
      var target = event.target;
      if (target.className.indexOf("weui-cell") !== -1) {
        target = target;
      } else if (target.className.indexOf("weui-cell") === -1) {
        var x = target;

        while (x.className.indexOf("weui-cell") === -1) {
          x = x.parentNode;
          if (x.className.indexOf("weui-cell") !== -1) {
            target = x;
          }
        }
      }

      var box = document.querySelector("#vux_view_box_body");
      var list = box.querySelectorAll(".weui-icon");

      [].forEach.call(list, function(item) {
        // do whatever
        //console.log("---");
        //console.log(item);
        //console.log(item.className);
        item.className = "weui-icon weui_icon_circle weui-icon-circle";
      });

      //  [].forEach.call(list,(item)=>{
      //      item.className='weui-icon weui_icon_circle weui-icon-circle'
      //  })

      //console.log(target.querySelector('.weui_icon_circle'))

      target.querySelector(".weui_icon_circle").className =
        "weui-icon weui_icon_success_circle weui-icon-success-circle";

      //console.log(target);

      let _this = this;
      if (count < max || max == null) {
        //人数未满或没有限制最大上限

        if (passwd == false) {
          this.clock = false;

          //不需要密码
          window.localStorage.setItem("teamId", teamid);
          window.localStorage.removeItem("passwd");

          // _this.$router.push("/certificate/identity");
          // indexedDB("teamId", "set", _this.RACEID, teamid, function() {
          //   indexedDB("passwd", "remove", _this.RACEID, "", function() {
          //     _this.$router.push("/certificate/identity");
          //   });
          // });
        } else {
          //需要密码
          window.localStorage.removeItem("passwd");
          _this.show = true;
          _this.id = teamid;
          this.clock = true;
          // indexedDB("passwd", "remove", _this.RACEID, "", function() {
          //   _this.show = true;
          //   _this.id = teamid;
          // });
        }
      }

      // console.log(count);
      // console.log(max);
    },
    next() {
      //console.log(this.clock);
      if (!this.clock) {
        this.$router.push("/certificate/identity");
      } else {
      }
    },
    searchList() {
      if (this.searchName != "") {
        this.axios
          .post(
            `${window.host}team/search`,
            qs.stringify({
              eventid: this.eventId,
              key: this.searchName
            })
          )
          .then(
            response => {
              if (response.data.code == "200") {
                this.list = [];

                this.$set(this, "list", this.list.concat(response.data.data));

                if (response.data.data.length < 20) {
                  this.stop = true;
                }

                setTimeout(() => {
                  this.demo4Value.pullupStatus = "default";
                  this.$nextTick(() => {
                    this.$refs.scroller.reset();
                  });
                }, 10);
              } else {
                this.$vux.toast.show({
                  text: this.wrongMsg,
                  type: "warn"
                });
              }
            },
            error => {
              console.log(error);
            }
          );
      } else {
        this.pageIndex = 1;
        this.list = [];
        this.getList();
      }
    },
    goCreatTeam() {
      this.$router.push("/createteam");
    },
    getList() {
      this.axios
        .post(
          `${window.host}team/list`,
          qs.stringify({
            eventid: this.eventId,
            page: this.pageIndex
          })
        )
        .then(
          response => {
            if (response.data.code == "200") {
              this.pageIndex++;

              this.$set(this, "list", this.list.concat(response.data.data));

              if (response.data.data.length < 10) {
                this.stop = true;
              }

              setTimeout(() => {
                this.demo4Value.pullupStatus = "default";
                this.$nextTick(() => {
                  this.$refs.scroller.reset();
                });
              }, 10);
            } else {
              this.$vux.toast.show({
                text: this.wrongMsg,
                type: "warn"
              });
            }
          },
          error => {
            console.log(error);
          }
        );
    },
    modal() {
      let flexItems = document.querySelectorAll(".flex-demo");
      //let flexItem = document.querySelectorAll('.flex-demo')[index];
      let lists = document.querySelectorAll(".wrapper>div>ul>li");

      [].forEach.call(flexItems, function(item, index) {
        item.querySelector("i").className = "fa fa-sort-down";
        lists[index].style.display = "none";
        document.querySelector("#app .modal").style.display = "none";
      });
    },
    chooseDate(e) {
      //console.log(e.target)

      if (e.target.innerHTML == "年") {
        document.querySelectorAll(".data-right")[0].style.display = "none";
        document.querySelectorAll(".data-right")[1].style.display = "block";
      } else {
        document.querySelectorAll(".data-right")[1].style.display = "none";
        document.querySelectorAll(".data-right")[0].style.display = "block";
      }
    },
    toggle(e, index) {
      let flexItems = document.querySelectorAll(".flex-demo");
      let flexItem = document.querySelectorAll(".flex-demo")[index];
      let lists = document.querySelectorAll(".wrapper>div>ul>li");

      //console.log(lists[index])
      //lists[index].style.display = 'block'

      if (flexItem.querySelector("i").className.indexOf("fa-sort-down") != -1) {
        // console.log(flexItem.querySelector('i').className)
        //   console.log(flexItem.querySelector('i').className.indexOf("fa-sort-down"))
        [].forEach.call(flexItems, function(item, index) {
          item.querySelector("i").className = "fa fa-sort-down";
          lists[index].style.display = "none";
        });
        flexItem.querySelector("i").className = "fa fa-sort-up";
        lists[index].style.display = "block";
        document.querySelector("#app .modal").style.display = "block";
      } else if (
        flexItem.querySelector("i").className.indexOf("fa-sort-up") != -1
      ) {
        flexItem.querySelector("i").className = "fa fa-sort-down";
        lists[index].style.display = "none";
        document.querySelector("#app .modal").style.display = "none";
      }

      //        if(index==1){
      //          document.querySelectorAll('.data-right')[0].style.display='block'
      //        }
    },
    toggleArea(e, index) {
      let area = document.querySelector(".area");
      //e.target.style.color='red';

      [].forEach.call(area.querySelectorAll("ul li"), function(item, index) {
        item.style.display = "none";
      });

      area.querySelectorAll("ul li")[index].style.display = "block";
      //console.log(index)
    },
    load4() {
      this.demo4Value.pullupStatus = "up";
      if (this.stop == true) {
        return;
      }

      this.getList();
    }
  },
  directives: {
    TransferDom
  },
  components: {
    Confirm,
    Checker,
    CheckerItem,
    CellBox,
    Cell,
    Myflow,
    Myheader,
    Flexbox,
    FlexboxItem,
    Panel,
    Search,
    Rater,
    Group,
    XHeader,
    ViewBox,
    Scroller,
    Spinner,
    CircleMenu,
    Drawer,
    XButton,
    XDialog,
    XInput
  }
};
</script>


<style lang="less" rel="stylesheet/less">
#race html,
#app body {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}

.flex-demo {
  text-align: center;
}

#teamlist .weui-media-box {
  padding: 0;
}

#teamlist .weui-media-box__hd {
  margin-left: 6px;
}

#race .weui-media-box_appmsg .weui-media-box__hd {
  width: 70px;
  height: 70px;
}

#race .status {
  position: absolute;
  top: 4px;
  right: 0;
}

#race .vux-header .vux-header-left {
  top: 7px;
}

#race .vux-header-title-area {
  text-align: center;
  line-height: 40px;
}

#race .vux-header-right {
  font-size: 25px;
  display: none;
}

#race .footerBanner {
  display: none;
}

#race .weui-tab__panel {
  padding-bottom: 0;
}

#race ul {
  background-color: #fcf9fe;
  li {
    background-color: white;
    margin-top: 10px;
  }
}

#race .vux-flexbox {
  background-color: white;
  line-height: 30px;
  position: relative;
  z-index: 2;
}

#race .flex-demo .fa {
  vertical-align: text-top;
  padding-left: 5px;
}

#race .flex-demo .fa-sort-up {
  position: relative;
  top: 7px;
}

#race .wrapper {
  position: absolute;
  left: 0;
  top: 30px;
  z-index: 1;
  width: 100%;
}

#race .modal {
  background-color: #000;
  width: 100%;
  height: 100vh;
  display: none;
  opacity: 0.6;
  position: absolute;
  top: 0;
  z-index: 1;
}

#race .wrapper li {
  display: none;
  & > div > div {
    margin-top: -10px;
    margin-bottom: 10px;
  }
}

#race .area .vux-flexbox-item {
  text-align: center;
}

#race .area span {
  padding: 10px;
  line-height: 2;
  display: inline-block;
}

#race .data-box {
  display: flex;
  .data-left {
    flex: 1;
    text-align: center;
  }
  .data-right {
    flex: 2;
  }
}

#race #CircleMenu {
  position: absolute;
  right: 20px;
  bottom: 20px;
}

#race .vux-search-box {
  z-index: 2;
  position: relative;
}

#race .vux-header {
  position: relative;
  z-index: 2;
}

#race .wrapper {
  padding: 0;
}

#app .footerBanner {
  display: none;
}

#teamlist {
  position: relative;
}

#teamlist .vux-x-dialog .vux-x-input input {
  width: 190px;
}

#teamlist .vux-x-input .weui-icon {
  padding-left: 5px;
  position: relative;
}

#teamlist .weui-btn_primary {
  position: relative;
}
#teamlist .weui-media-box_appmsg {
  background: white;
}

#teamlist .vux-header-title-area {
  text-align: center;
  line-height: 40px;
}

#teamlist #myflow {
  position: static;
}

#teamlist .button.weui-btn,
button.weui-btn {
  margin-top: 10px;
}

#teamlist #postcode input {
  border: 1px solid #eeeeee;
  max-width: 190px;
  height: 30px;
  border-radius: 8px;
  text-align: left;
  text-indent: 1em;
}

#postcode .weui-cell__bd {
  text-align: left;
}

#teamlist .vux-x-input button.weui-btn {
  margin-top: 0px;
}
</style>

